<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>井字棋游戏</title>
    <style>
        body {
            font-family: 'Microsoft Yahei', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 50px 20px;
            background: linear-gradient(to right, #ff9a9e, #fad0c4);
            transition: background-color 0.3s;
        }

        h1 {
            color: #333;
            margin-bottom: 10px;
        }

        .score-board {
            display: flex;
            justify-content: space-around;
            width: 100%;
            max-width: 300px;
            margin-bottom: 20px;
            padding: 10px;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 10px;
        }

        .score {
            font-size: 18px;
            font-weight: bold;
        }

        .game-container {
            display: grid;
            grid-template-columns: repeat(3, 120px);
            grid-template-rows: repeat(3, 120px);
            gap: 10px;
            margin-bottom: 20px;
            padding: 10px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 10px;
        }

        .cell {
            width: 120px;
            height: 120px;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 64px;
            cursor: pointer;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }

        .cell:hover {
            transform: scale(1.05);
            background-color: #fff9c4;
        }

        .status {
            margin-bottom: 10px;
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }

        .button-group {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 10px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #restartBtn {
            background-color: #ff5722;
            color: white;
        }

        #resetScoreBtn {
            background-color: #9c27b0;
            color: white;
        }

        button:hover {
            opacity: 0.9;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <h1>井字棋游戏</h1>
    
    <div class="score-board">
        <div class="score" id="playerXScore">玩家 X: 0</div>
        <div class="score" id="playerOScore">玩家 O: 0</div>
        <div class="score" id="drawScore">平局: 0</div>
    </div>
    
    <div class="status" id="status">当前玩家: X</div>
    
    <div class="game-container" id="gameBoard"></div>
    
    <div class="button-group">
        <button id="restartBtn" onclick="resetGame()">重新开始</button>
        <button id="resetScoreBtn" onclick="resetScore()">重置比分</button>
    </div>

    <script>
        let board = [];
        let currentPlayer = 'X';
        let isGameActive = true;
        const statusElement = document.getElementById('status');
        const playerXScoreElement = document.getElementById('playerXScore');
        const playerOScoreElement = document.getElementById('playerOScore');
        const drawScoreElement = document.getElementById('drawScore');

        // 初始化比分
        let scores = {
            X: 0,
            O: 0,
            Draw: 0
        };

        function createBoard() {
            const boardElement = document.getElementById('gameBoard');
            boardElement.innerHTML = '';
            board = Array(9).fill(null);

            for (let i = 0; i < 9; i++) {
                const cell = document.createElement('div');
                cell.className = 'cell';
                cell.dataset.index = i;
                cell.addEventListener('click', handleCellClick);
                boardElement.appendChild(cell);
            }
        }

        function handleCellClick(e) {
            const index = e.target.dataset.index;

            if (!isGameActive || board[index]) return;

            board[index] = currentPlayer;
            e.target.textContent = currentPlayer;

            // 添加颜色变化动画
            e.target.style.backgroundColor = currentPlayer === 'X' ? '#bbdefb' : '#ffcdd2';

            if (checkWin()) {
                statusElement.textContent = `玩家 ${currentPlayer} 获胜！`;
                
                // 更新比分
                scores[currentPlayer]++;
                updateScoreDisplay();
                
                isGameActive = false;
                return;
            }

            if (board.every(cell => cell)) {
                statusElement.textContent = "平局！";
                scores.Draw++;
                updateScoreDisplay();
                isGameActive = false;
                return;
            }

            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
            statusElement.textContent = `当前玩家: ${currentPlayer}`;
            
            // 改变背景色增加趣味性
            document.body.style.background = currentPlayer === 'X' 
                ? 'linear-gradient(to right, #ff9a9e, #fad0c4)' 
                : 'linear-gradient(to right, #a18cd1, #fbc2eb)';
        }

        function checkWin() {
            const winPatterns = [
                [0,1,2], [3,4,5], [6,7,8], // 行
                [0,3,6], [1,4,7], [2,5,8], // 列
                [0,4,8], [2,4,6]           // 对角线
            ];

            return winPatterns.some(pattern => {
                const [a, b, c] = pattern;
                return board[a] && board[a] === board[b] && board[a] === board[c];
            });
        }

        function resetGame() {
            currentPlayer = 'X';
            isGameActive = true;
            statusElement.textContent = `当前玩家: ${currentPlayer}`;
            createBoard();
            
            // 恢复默认背景色
            document.body.style.background = 'linear-gradient(to right, #ff9a9e, #fad0c4)';
        }

        function resetScore() {
            scores = {
                X: 0,
                O: 0,
                Draw: 0
            };
            updateScoreDisplay();
            resetGame();
        }

        function updateScoreDisplay() {
            playerXScoreElement.textContent = `玩家 X: ${scores.X}`;
            playerOScoreElement.textContent = `玩家 O: ${scores.O}`;
            drawScoreElement.textContent = `平局: ${scores.Draw}`;
        }

        createBoard();
    </script>
</body>
</html>